<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            /* 
                点击按钮以后弹出一个内容
            */

            /* 
                使用对象.事件=函数的形式绑定响应函数
                它只能同时为一个元素的一个事件绑定一个响应函数
                不能绑定多个，如果绑定多个，后边的会将前边的覆盖掉
            */
            // var btn01=document.getElementById("btn01");
            // btn01.onclick=function(){
            //     alert(1);
            // };
            // btn01.onclick=function(){
            //     alert(2);
            // }

            /* 
                addEventListener()
                -通过这个方法也可以为元素绑定响应函数
                -参数
                1.事件的字符串，不要on
                2.回调函数，当事件触发时该函数会被调用
                3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
                使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
                这样当事件被触发时，响应函数 将会按照函数的绑定顺序执行

                这个方法不支持IE8及以下的浏览器
            */
        //    btn01.addEventListener("click",function(){
        //        alert(1);
        //    },false)
        //    btn01.addEventListener("click",function(){
        //        alert(2);
        //    },false)



          /* 
            attachEvent()
            -在IE8中可以使用attachEvent()来绑定事件
            -参数：
            1.事件的字符串，要on
            2.回调函数

            -这个方法也可以同时为一个事件绑定多个处理函数，
            不同的时他是后绑定先执行，执行顺序和addEventListener()相反

       */

        //    btn01.attachEvent("onclick",function(){
        //          alert(1);
        //      });
          //    btn01.attachEvent("onclick",function(){
        //          alert(2);
        //      });


        //    btn01.addEventListener("click",function(){
        //          alert(this);
        //        },false)
        //    btn01.attachEvent("onclick",function(){
        //          alert(this);
        //      });


            //  bind(btn01,"click",function(){
            //      alert(1);
            //  });
            //  bind(btn01,"click",function(){
            //      alert(2);
            //  });

        /* 
            定义一个函数，用来为指定元素绑定响应函数


            adEventListener()中的this,是绑定事件的对象
            attachEvent()中的this，是window
            需要统一两个方法this
        */
        bind(btn01,"click",function(){
                 alert(this);
             });

    /* 
        定义一个函数，用来为指定元素绑定响应函数
        参数：
        obj要绑定事件的对象
        evenStr事件的字符串(不要on)
        callback回调函数
    */

    function bind(obj,eventStr,callback){
        //判断obj这个对象里是否有这个方法
        if(obj.addEventListener){
        //大部分浏览器兼容的方式
        obj.addEventListener(eventStr,callback,false);
        }else{
            /* 
                this是谁由调用方式决定
                callback.call(obj)
            */
        //IE8及以下
        obj.attachEvent("on"+eventStr,function(){
            //在匿名函数中调用回调函数
            callback.call(obj);

        });
        }
    
    }

        }
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
</body>
</html>